<template>
    <div>
        <div v-if="myAddressSlots.length > 0">
            <mt-picker :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker>
          <p>地址3级联动：{{myAddressProvince}} {{myAddressCity}} {{myAddresscounty}}</p>
        </div>
    </div>

</template>

<script>
    import { Picker } from 'mint-ui';
    // import myaddress from '../../../static/address3.json'     //引入省市区数据
    export default {
        name: "Picker",
        props: {},

        data () {

            return {
                myaddress:[],
                myAddressSlots: [
                ],

                myAddressProvince:'省',

                myAddressCity:'市',

                myAddresscounty:'区/县',

            }

        },
        mounted(){
            this.getCityMsg();
        },
        methods:{
            onMyAddressChange(picker, values) {
                if(this.myaddress[values[0]]){  //这个判断类似于v-if的效果（可以不加，但是vue会报错，很不爽）
                    picker.setSlotValues(1,Object.keys(this.myaddress[values[0]])); // Object.keys()会返回一个数组，当前省的数组
                    picker.setSlotValues(2,this.myaddress[values[0]][values[1]]); // 区/县数据就是一个数组
                    this.myAddressProvince = values[0];
                    this.myAddressCity = values[1];
                    this.myAddresscounty = values[2];
                }
            },
            getCityMsg(){
                let url = `${this.NW_API_API_LOCALE_VERSION}/city/select/list`;
                this.xurl.get(url).then((data)=>{
                    if(data.success){
                        this.myaddress = data.result.allCitys;
                        this.myAddressSlots = [
                            {

                                flex: 1,

                                defaultIndex: 1,

                                values: Object.keys(this.myaddress),  //省份数组

                                className: 'slot1',

                                textAlign: 'center'

                            }, {

                                divider: true,

                                content: '-',

                                className: 'slot2'

                            }, {

                                flex: 1,

                                values: [],

                                className: 'slot3',

                                textAlign: 'center'

                            },

                            {

                                divider: true,

                                content: '-',

                                className: 'slot4'

                            },

                            {

                                flex: 1,

                                values: [],

                                className: 'slot5',

                                textAlign: 'center'

                            }
                        ]
                    }
                });
            },
        },
        components:{
            'mt-picker':Picker,
        }
    }
</script>

<style scoped>

</style>